
<html>
    <head>
    <link rel="stylesheet" href="circle.css">
        <script type="text/javascript" src="sketching.js"></script>
        <script type="text/javascript">
			var counter = 0;
            var c0 = 0;
            var c1 = 0;
            var c2 = 0;
            var c3 = 0;
            var topValue = 0;
            
            function sketchOnIOPack(v0, v1, v2, v3) {
                //if (counter%10 == 0){
                    var msg = "data count" + counter+ " values: " + v0 + ", " + v1 + ", " + v2 + ", " + v3 + " c2: " + c2 + "<br />";
                    debugIOPack.innerHTML = msg;
                    moveCircle(v0);
                //}
                counter++;
            }
//            function pausecomp(millis) 
//            {
//                var date = new Date();
//                var curDate = null;
//
//                do { curDate = new Date(); } 
//                while(curDate-date < millis);
//            } 
            
            function moveCircle(y){
                topValue = (y * 10);
                if (topValue > 200) topValue = 200;
                circle.style.top = topValue + "px";
            }

            function sketchOnAccelerate(x, y, z) {
            }
            function sketchOnLocation(lat, lon, alt) {
            }
        </script>
		<style type="text/css">
			.backgroundImageThatFillsParent {
				display: block
				width: 100%;
				height: 100%;
				position: absolute;
			}
			#ball {
				display: block;
				position: absolute;
				width: 500px;
				height: 500px;
			}
		</style>
    </head>
    <body style="font-size: 16px;font-family:sans serif; color: black;">
        
        <!-- div id="ball">
			<img src="Images/ball_background.png" class="backgroundImageThatFillsParent" />
			<img src="Images/ball_highlight.png" class="backgroundImageThatFillsParent" />
        </div -->

        <div id="circle">
        </div>

        <br />
        <h1>Testing Interface 3</h1>
        <b>IOPack outputs:</b>
        <form>
            <input type="button" onclick="sketchSendIOPack(document.forms[0].elements[1].value, document.forms[0].elements[2].value, document.forms[0].elements[3].value, document.forms[0].elements[4].value);" value="Send to IOPack" />
            <br />
            0:<input type="text" value="0" name="v0" /><br />
            1:<input type="text" value="0" name="v1" /><br /> 
            2:<input type="text" value="0" name="v2" /><br />
            3:<input type="text" value="0" name="v3" /><br />
        </form>
        <br />
        <b>Most recent event:</b>
        <div id="debugIOPack">(none)
        </div>
    </body>
</html>